<template>
  <div class="page-form">
    <div class="form-wrapper center">
      <h1>{{$route.meta.title}}</h1>
      <div class="top-line"></div>
      <div class="order-summary">
        <div class="order-title">订单编号：{{data.orderSubNo}}<span>【<value :model="data" prop="status" dictName="order_status"/>】</span></div>
        <el-form ref="orderForm" inline label-width="auto" size="small">
        <el-row class="order-content">
          <el-col :span="4">
            <div class="label">制单人：</div>
            <div class="value"><value :model="data" prop="createUserName"/></div>
          </el-col>
          <el-col :span="4">
            <div class="label">出发地：</div>
            <div class="value"><value :model="data" prop="startCode" type="city"/></div>
          </el-col>
          <el-col :span="4">
            <div class="label">目的地：</div>
            <div class="value"><value :model="data" prop="destinationCode" type="city"/></div>
          </el-col>
          <el-col :span="4">
            <div class="label">车辆名称：</div>
            <div class="value"><value :model="data" prop="carName"/></div>
          </el-col>
<!--          <el-col :span="4">-->
<!--            <div class="label">车架号码：</div>-->
<!--            <div class="value"><value :model="data" prop="vin"/></div>-->
<!--          </el-col>-->
          <el-col :span="6">
            <el-form-item label="车架号码" prop="transportFee">
              <el-input v-model="orderForm.form.vin" :disabled="orderForm.state.mode | modeBtnDisable"/>
            </el-form-item>
            <div class="op" style="width: 82px">
              <el-button :loading="orderForm.state.saving" @click="editOrSave(orderForm)" size="mini" type="text">{{orderForm.state.mode | modeBtnText}}</el-button>
              <el-button v-if="orderForm.state.mode == 'u'" @click="cancelOrderForm(orderForm)" size="mini" type="text">取消</el-button>
            </div>
          </el-col>
        </el-row>
        </el-form>
      </div>

      <div class="form">
        <div class="block">
          <div class="title-bar">
            <div class="title"><h2>收款信息</h2><i>（ 运费合计：<span class="money">￥{{totalFee}}</span> ）</i></div>
            <div class="op">
              <el-button :loading="feeForm.state.saving" @click="editOrSave(feeForm)" size="mini" type="text">{{feeForm.state.mode | modeBtnText}}</el-button>
              <el-button v-if="feeForm.state.mode == 'u'" @click="cancelFeeForm(feeForm)" size="mini" type="text">取消</el-button>
            </div>
          </div>
          <el-form ref="feeForm" :disabled="feeForm.state.mode | modeBtnDisable" inline label-width="auto" size="small">
            <div class="line" style="margin: 0 24px"></div>
            <div class="content">
              <el-row :gutter="layout.colGutter">
                <el-col :span="layout.colSpan">
                  <el-form-item label="运输费用" prop="transportFee">
                    <ad-input-number v-model="feeForm.form.transportFee" append="元" :precision="2"/>
                  </el-form-item>
                </el-col>
                <el-col :span="layout.colSpan">
                  <el-form-item label="客户返款" prop="kickbackFee">
                    <ad-input-number v-model="feeForm.form.kickbackFee" append="元" :precision="2"/>
                  </el-form-item>
                </el-col>
                <el-col :span="layout.colSpan">
                  <el-form-item label="开票税额">
                    <ad-input-number v-model="feeForm.form.invoiceFee" append="元" :precision="2"/>
                  </el-form-item>
                </el-col>
                <el-col :span="layout.colSpan">
                  <el-form-item label="保险费用">
                    <ad-input-number v-model="feeForm.form.insuranceFee" append="元" :precision="2"/>
                  </el-form-item>
                </el-col>
                <el-col :span="layout.colSpan">
                  <el-form-item label="提车费用" prop="pickFee">
                    <ad-input-number v-model="feeForm.form.pickFee" append="元" :precision="2"/>
                  </el-form-item>
                </el-col>
                <el-col :span="layout.colSpan">
                  <el-form-item label="送车费用" prop="takeFee">
                    <ad-input-number v-model="feeForm.form.takeFee" append="元" :precision="2"/>
                  </el-form-item>
                </el-col>
                <el-col :span="layout.colSpan">
                  <el-form-item label="付款方式" prop="paymentType">
                    <ad-status-select v-model="feeForm.form.paymentType" multiple collapse-tags :dict="dict.payment_type" />
                  </el-form-item>
                </el-col>
                <el-col :span="layout.colSpan" v-if="feeForm.form.paymentType && feeForm.form.paymentType.indexOf(1) !==-1">
                  <el-form-item label="现付金额" prop="spotPayFee">
                    <ad-input-number v-model="feeForm.form.spotPayFee" append="元" :precision="2"/>
                  </el-form-item>
                </el-col>
                <el-col :span="layout.colSpan" v-if="feeForm.form.paymentType && feeForm.form.paymentType.indexOf(2) !==-1">
                  <el-form-item label="到付金额" prop="deliveryPayFee">
                    <ad-input-number v-model="feeForm.form.deliveryPayFee" append="元" :precision="2"/>
                  </el-form-item>
                </el-col>
                <el-col :span="layout.colSpan" v-if="feeForm.form.paymentType && feeForm.form.paymentType.indexOf(3) !==-1">
                  <el-form-item label="欠付金额" prop="backPayFee">
                    <ad-input-number v-model="feeForm.form.backPayFee" append="元" :precision="2"/>
                  </el-form-item>
                </el-col>
                <el-col :span="layout.colSpan" v-if="feeForm.form.paymentType && feeForm.form.paymentType.indexOf(4) !==-1">
                  <el-form-item label="月结金额" prop="slotPayFee">
                    <ad-input-number v-model="feeForm.form.slotPayFee" append="元" :precision="2"/>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </el-form>
        </div>

        <div class="block" v-if="pickForm.state.hasForm" v-loading="pickForm.state.loading">
          <div class="title-bar">
            <div class="title"><h2>提车信息</h2></div>
            <div class="op">
              <el-button :loading="pickForm.state.saving" @click="editOrSave(pickForm)" size="mini" type="text">{{pickForm.state.mode | modeBtnText}}</el-button>
              <el-button v-if="pickForm.state.mode == 'u'" @click="cancelPickForm(pickForm)" size="mini" type="text">取消</el-button>
            </div>
          </div>
          <el-form ref="pickForm" :disabled="pickForm.state.mode | modeBtnDisable" inline label-width="auto" size="small">
            <div class="content">
              <el-row :gutter="layout.colGutter">
                <el-col :span="layout.colSpan">
                  <el-form-item label="提车费">
                    <ad-input-number v-model="pickForm.form.pickCarFee" append="元" :precision="2"/>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="layout.colGutter">
                <el-col :span="layout.colSpan">
                  <el-form-item label="结算方式">
                    <ad-status-select v-model="pickForm.form.settlementType" :dict="dict.settlement_type"/>
                  </el-form-item>
                </el-col>
                <el-col :span="layout.colSpan">
                  <el-form-item label="公司名称">
                    <ad-suggestion v-model="pickForm.form.company" defaultProp="companyName" type="table" @select="selectPickCompany" @clear="removePickCompany"
                                   :api="{method: getSuggestCompanyList, query: 'companyName'}"
                                   :options="[{label: '公司名称', prop: 'companyName'},{label: '结算人', prop: 'linkmanName'},{label: '联系电话', prop: 'linkmanPhone'}]"/>
                  </el-form-item>
                </el-col>
                <el-col :span="layout.colSpan">
                  <el-form-item label="结算人">
                    <ad-suggestion v-model="pickForm.form.settlementName" defaultProp="linkmanName" type="table" @select="selectPickCompany" @clear="removePickCompany"
                                   :api="{method: getSuggestCompanyList, query: 'linkmanName'}"
                                   :options="[{label: '结算人', prop: 'linkmanName'},{label: '公司名称', prop: 'companyName'},{label: '联系电话', prop: 'linkmanPhone'}]"/>
                  </el-form-item>
                </el-col>
                <el-col :span="layout.colSpan">
                  <el-form-item label="结算电话">
                    <ad-suggestion v-model="pickForm.form.settlementPhone" defaultProp="linkmanPhone" type="table" @select="selectPickCompany" @clear="removePickCompany"
                                   :api="{method: getSuggestCompanyList, query: 'linkmanPhone', startQueryCount: 4}"
                                   :options="[{label: '联系电话', prop: 'linkmanPhone'},{label: '结算人', prop: 'linkmanName'},{label: '公司名称', prop: 'companyName'}]"/>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </el-form>
        </div>

        <div class="block" v-if="takeForm.state.hasForm" v-loading="takeForm.state.loading">
          <div class="title-bar">
            <div class="title"><h2>送车信息</h2></div>
            <div class="op">
              <el-button :loading="takeForm.state.saving" @click="editOrSave(takeForm)" size="mini" type="text">{{takeForm.state.mode | modeBtnText}}</el-button>
              <el-button v-if="takeForm.state.mode == 'u'" @click="cancelTakeForm(takeForm)" size="mini" type="text">取消</el-button>
            </div>
          </div>
          <el-form ref="takeForm" :disabled="takeForm.state.mode | modeBtnDisable" inline label-width="auto" size="small">
            <div class="content">
              <el-row :gutter="layout.colGutter">
                <el-col :span="layout.colSpan">
                  <el-form-item label="送车费">
                    <ad-input-number v-model="takeForm.form.takeCarFee" append="元" :precision="2"/>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="layout.colGutter">
                <el-col :span="layout.colSpan">
                  <el-form-item label="结算方式">
                    <ad-status-select v-model="takeForm.form.settlementType" :dict="dict.settlement_type"/>
                  </el-form-item>
                </el-col>
                <el-col :span="layout.colSpan">
                  <el-form-item label="公司名称">
                    <ad-suggestion v-model="takeForm.form.company" defaultProp="companyName" type="table" @select="selectTakeCompany" @clear="removeTakeCompany"
                                   :api="{method: getSuggestCompanyList, query: 'companyName'}"
                                   :options="[{label: '公司名称', prop: 'companyName'},{label: '结算人', prop: 'linkmanName'},{label: '联系电话', prop: 'linkmanPhone'}]"/>
                  </el-form-item>
                </el-col>
                <el-col :span="layout.colSpan">
                  <el-form-item label="结算人">
                    <ad-suggestion v-model="takeForm.form.settlementName" defaultProp="linkmanName" type="table" @select="selectTakeCompany" @clear="removeTakeCompany"
                                   :api="{method: getSuggestCompanyList, query: 'linkmanName'}"
                                   :options="[{label: '结算人', prop: 'linkmanName'},{label: '公司名称', prop: 'companyName'},{label: '联系电话', prop: 'linkmanPhone'}]"/>
                  </el-form-item>
                </el-col>
                <el-col :span="layout.colSpan">
                  <el-form-item label="结算电话">
                    <ad-suggestion v-model="takeForm.form.settlementPhone" defaultProp="linkmanPhone" type="table" @select="selectTakeCompany" @clear="removeTakeCompany"
                                   :api="{method: getSuggestCompanyList, query: 'linkmanPhone', startQueryCount: 4}"
                                   :options="[{label: '联系电话', prop: 'linkmanPhone'},{label: '结算人', prop: 'linkmanName'},{label: '公司名称', prop: 'companyName'}]"/>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </el-form>
        </div>

        <template v-if="transportForms.length">
          <div class="block" v-for="(formWrapper, index) in transportForms" v-loading="formWrapper.state.loading">
            <div class="title-bar">
              <div class="title"><h2>发运信息<span style="font-weight: normal">（ 运单号：<value :model="formWrapper" prop="form.transportNo"/> ）</span></h2></div>
              <div class="op">
                <el-button :loading="formWrapper.state.saving" @click="editOrSave(formWrapper)" size="mini" type="text">{{formWrapper.state.mode | modeBtnText}}</el-button>
                <el-button v-if="formWrapper.state.mode == 'u'" @click="cancelTransportForm(formWrapper, index)" size="mini" type="text">取消</el-button>
              </div>
            </div>
            <el-form :ref="'transportForm.' + formWrapper.form.id" v-loading="formWrapper.state.saving" :disabled="formWrapper.state.mode | modeBtnDisable" inline label-width="auto" size="small">
              <div class="content">
                <el-row :gutter="layout.colGutter">
                  <el-col :span="layout.colSpan">
                    <el-form-item label="发运成本">
                      <ad-input-number v-model="formWrapper.form.cost" append="元" :precision="2"/>
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
            </el-form>
          </div>
        </template>

        <div class="block">
          <div class="title-bar">
            <div class="title"><h2>额外费用</h2></div>
            <div class="op">
<!--                <el-button :loading="formWrapper.state.saving" @click="editOrSave(formWrapper)" size="mini" type="text">{{formWrapper.state.mode | modeBtnText}}</el-button>-->
<!--                <el-button v-if="formWrapper.state.mode == 'u'" @click="formWrapper.state.mode = 'r'" size="mini" type="text">取消</el-button>-->
              <el-button @click="addOtherFee(otherFeeForms)" size="mini" type="text">新增</el-button>
            </div>
          </div>
          <el-form v-for="(formWrapper, index) in otherFeeForms" v-loading="formWrapper.state.loading" :ref="'otherFeeForm.' + formWrapper.form.id" inline label-width="auto" size="small">
            <div class="content">
              <el-row :gutter="layout.colGutter">
                <el-col :span="5">
                  <el-form-item label="费用类型">
                    <ad-status-select v-model="formWrapper.form.type" :dict="dict.fee_type" :disabled="formWrapper.state.mode | modeBtnDisable"/>
                  </el-form-item>
                </el-col>
                <el-col :span="layout.colSpan">
                  <el-form-item label="费用金额">
                    <ad-input-number v-model="formWrapper.form.fee" append="元" :precision="2" :disabled="formWrapper.state.mode | modeBtnDisable"/>
                  </el-form-item>
                </el-col>
                <el-col :span="layout.colSpan">
                  <el-form-item label="结算人">
                    <ad-suggestion v-model="formWrapper.form.settlementName" defaultProp="linkmanName" type="table" @select="selectOtherCompany($event, formWrapper.form)" @clear="removeOtherCompany" :disabled="formWrapper.state.mode | modeBtnDisable"
                                   :api="{method: getSuggestCompanyList, query: 'linkmanName'}"
                                   :options="[{label: '结算人', prop: 'linkmanName'},{label: '公司名称', prop: 'companyName'},{label: '联系电话', prop: 'linkmanPhone'}]"/>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="结算电话">
                    <ad-suggestion v-model="formWrapper.form.settlementPhone" defaultProp="linkmanPhone" type="table" @select="selectOtherCompany($event, formWrapper.form)" @clear="removeOtherCompany" :disabled="formWrapper.state.mode | modeBtnDisable"
                                   :api="{method: getSuggestCompanyList, query: 'linkmanPhone', startQueryCount: 4}"
                                   :options="[{label: '联系电话', prop: 'linkmanPhone'},{label: '结算人', prop: 'linkmanName'},{label: '公司名称', prop: 'companyName'}]"/>
                  </el-form-item>
                </el-col>
                <el-col :span="2">
                  <div class="op" style="text-align: right">
                    <el-button :loading="formWrapper.state.saving" @click="editOrSave(formWrapper)" size="mini" type="text">{{formWrapper.state.mode | modeBtnText}}</el-button>
                    <el-button v-if="formWrapper.state.mode == 'c' || formWrapper.state.mode == 'u'" @click="cancelOtherFee(otherFeeForms, index)" size="mini" type="text">取消</el-button>
                    <el-button v-if="formWrapper.state.mode == 'r'" @click="delOtherFee(otherFeeForms, index)" size="mini" type="text">删除</el-button>
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Value from '@/components/AdValue'
import AdInputNumber from '@/components/AdInputNumber'
import AdSuggestion from '@/components/AdSuggestion'
import AdStatusSelect from '@/components/AdStatusSelect'
import { isFieldNumber } from '@/utils/type'
import { getDetail as get } from '@/api/order/all'
import { getCompanyList as getSuggestCompanyList } from '@/api/suggestion'
import { saveOrder, saveFee, savePick, saveTake, saveTransport, saveOtherFee, addOtherFee, delOtherFee } from '@/api/edit/order'

class FormWrapper {
  state = {
    mode: 'r',
    loading: false,
    saving: false,
    hasForm: false,
  }

  api = {
    load: function() {},
    save: function(formWrapper) {
      return new Promise(
        function(resolve, reject) {
          setTimeout(() => {
            resolve('保存成功')
          }, 1000)
        }
      )
    }
  }

  form = {}

  constructor({form, state, api} = {}) {
    if (form) {
      this.form = {...this.form, ...form}
    }
    if (state) {
      this.state = {...this.state, ...state}
    }
    if (api) {
      this.api = {...this.api, ...api}
    }
  }
}

export default {
  name: 'finance-order-edit',
  components: { Value, AdInputNumber, AdSuggestion, AdStatusSelect },
  dicts: ['order_status','payment_type','settlement_type','fee_type'],
  data() {
    return {
      layout: { colGutter: 28, colSpan: 6, rowGutter: 16 },
      data: {},
      orderForm: new FormWrapper({api: {
        save({form}) {
          return saveOrder(form)
        },
        cancel({id, form}) {
          return get({id})
        }
      }}),
      feeForm: new FormWrapper({api: {
        save({form}) {
          return saveFee(form)
        },
        cancel({id, form}) {
          return get({id})
        }
      }}),
      pickForm: new FormWrapper({ api: {
        save({form}) {
          return savePick(form)
        },
        cancel({id, form}) {
          return get({id})
        }
      }}),
      takeForm: new FormWrapper({ api: {
        save({form}) {
          return saveTake(form)
        },
        cancel({id, form}) {
          return get({id})
        }
      }}),
      transportForms: [],
      signForms: [],
      otherFeeForms: []
    }
  },
  filters: {
    modeBtnText(mode) {
      return mode === 'r' ? '修改' : '保存'
    },
    modeBtnDisable(mode) {
      return mode === 'r' ? true : false
    }
  },
  watch:{
    $route :{
      handler(to, from){
        if((from&&from.path === '/finance/order/edit')&&to.path!=='/finance/order/edit'){
          return
        }

        this.load()
      }
      ,
      immediate: true
    },
  },


  computed: {
    // 运费合计 = 运输费 + 保险费 + 客户返款 + 开票税额 + 提车费用 + 送车费用
    totalFee() {
      const data = this.feeForm.form
      return (isFieldNumber(data.transportFee) ? Number(data.transportFee) : 0) +
             (isFieldNumber(data.insuranceFee) ? Number(data.insuranceFee) : 0) +
             (isFieldNumber(data.kickbackFee) ? Number(data.kickbackFee) : 0) +
             (isFieldNumber(data.invoiceFee) ? Number(data.invoiceFee) : 0) +
             (isFieldNumber(data.pickFee) ? Number(data.pickFee) : 0) +
             (isFieldNumber(data.takeFee) ? Number(data.takeFee) : 0)
    }
  },
  methods: { getSuggestCompanyList,
    selectPaymentType(value) {
      console.log(value)
    },
    autoCompleteForOnlyOnePaymentType() {
      // 清空未选中字段
      if (!(this.feeForm.form.paymentType.includes(1) || this.feeForm.form.paymentType.includes('1'))) { // 没现付
        this.feeForm.form.spotPayFee = undefined
      } else if (!(this.feeForm.form.paymentType.includes(2) || this.feeForm.form.paymentType.includes('2'))) { // 没到付
        this.feeForm.form.deliveryPayFee = undefined
      } else if (!(this.feeForm.form.paymentType.includes(3) || this.feeForm.form.paymentType.includes('3'))) { // 没欠付
        this.feeForm.form.backPayFee = undefined
      } else if (!(this.feeForm.form.paymentType.includes(4) || this.feeForm.form.paymentType.includes('4'))) { // 没月付
        this.feeForm.form.slotPayFee = undefined
      }
      // 付款方式只有一项时直接，直接赋值应收运费合计
      if (this.feeForm.form.paymentType.length == 1) {
        if (this.feeForm.form.paymentType.filter(type => type == 1).length > 0) {
          this.feeForm.form.spotPayFee = this.totalPrice // 现付
        } else if (this.feeForm.form.paymentType.filter(type => type == 2).length > 0) {
          this.feeForm.form.deliveryPayFee = this.totalPrice // 到付
        } else if (this.feeForm.form.paymentType.filter(type => type == 3).length > 0) {
          this.form.backPayFee = this.totalPrice // 欠付
        } else if (this.feeForm.form.paymentType.filter(type => type == 4).length > 0) {
          this.feeForm.form.slotPayFee = this.totalPrice // 月付
        }
      }
    },
    selectPickCompany(settlement) {
      this.pickForm.form.companyId = settlement.companyId
      this.pickForm.form.company = settlement.companyName
      this.pickForm.form.settlementId = settlement.linkmanId
      this.pickForm.form.settlementName = settlement.linkmanName
      this.pickForm.form.settlementPhone = settlement.linkmanPhone
    },
    removePickCompany() {
      this.pickForm.form.companyId = ''
      this.pickForm.form.company = ''
      this.pickForm.form.settlementId = ''
      this.pickForm.form.settlementName = ''
      this.pickForm.form.settlementPhone = ''
    },
    selectTakeCompany(settlement) {
      this.takeForm.form.companyId = settlement.companyId
      this.takeForm.form.company = settlement.companyName
      this.takeForm.form.settlementId = settlement.linkmanId
      this.takeForm.form.settlementName = settlement.linkmanName
      this.takeForm.form.settlementPhone = settlement.linkmanPhone
    },
    removeTakeCompany() {
      this.takeForm.form.companyId = ''
      this.takeForm.form.company = ''
      this.takeForm.form.settlementId = ''
      this.takeForm.form.settlementName = ''
      this.takeForm.form.settlementPhone = ''
    },
    selectOtherCompany(settlement, form) {
      form.settlementId = settlement.linkmanId
      form.settlementName = settlement.linkmanName
      form.settlementPhone = settlement.linkmanPhone
    },
    removeOtherCompany(form) {
      form.settlementId = ''
      form.settlementName = ''
      form.settlementPhone = ''
    },
    cancelOrderForm(formWrapper) {
      formWrapper.state.mode = 'r'
      formWrapper.api.cancel({...formWrapper, id: this.$route.query.id}).then(res => {
        this.orderForm.form = this.setOrderForm({id: res.data.id, vin: res.data.vin})
      })
    },
    cancelFeeForm(formWrapper) {
      formWrapper.state.mode = 'r'
      formWrapper.api.cancel({...formWrapper, id: this.$route.query.id}).then(res => {
        this.feeForm.form = this.setFeeForm(res.data)
      })
    },
    cancelPickForm(formWrapper) {
      formWrapper.state.mode = 'r'
      formWrapper.api.cancel({...formWrapper, id: this.$route.query.id}).then(res => {
        this.pickForm.form = this.setPickForm(res.data)
      })
    },
    cancelTakeForm(formWrapper) {
      formWrapper.state.mode = 'r'
      formWrapper.api.cancel({...formWrapper, id: this.$route.query.id}).then(res => {
        this.takeForm.form = this.setTakeForm(res.data)
      })
    },
    cancelTransportForm(formWrapper, index) {
      formWrapper.state.mode = 'r'
      formWrapper.api.cancel({...formWrapper, id: this.$route.query.id}).then(res => {
        this.transportForms[index].form = this.setTransportForm(res.data.transportSimpleList[index])
      })
    },
    cancelOtherFee(formList, index) {
      if (formList[index].state.mode == 'c') {
        formList.splice(index, 1)
      } else {
        formList[index].state.mode = 'r'
      }
    },
    addOtherFee(formList) {
      formList.push(new FormWrapper({
        state: {
          // newForm: true,
          mode: 'c'
        },
        api: {
          save({form}) {
            return addOtherFee(form)
          }
        },
        form: {
          orderId: this.$route.query.id
        }
      }))
    },
    delOtherFee(formList, index) {
      if (formList[index].form.id) {
        this.$confirm('确定删除吗？','删除').then(() => {
          delOtherFee(formList[index].form.id)
          formList.splice(index, 1)
        }).catch(err => {})
      } else {
        formList.splice(index, 1)
      }
    },
    editOrSave(formWrapper) {
      switch (formWrapper.state.mode) {
        case 'r':
          this.toggleBtnMode(formWrapper)
          break
        case 'c':
        case 'u':
          formWrapper.state.saving = true
          formWrapper.api.save(formWrapper).then(res => {
            this.toggleBtnMode(formWrapper)
            formWrapper.state.saving = false
          }).catch(err => {
            this.toggleBtnMode(formWrapper)
            formWrapper.state.saving = false
          })
          break
      }
    },
    toggleBtnMode(form) {
      form.state.mode = form.state.mode === 'r' ? 'u' : 'r'
    },
    load() {
      this.orderForm.state.loading = true
      this.feeForm.state.hasForm = true
      this.feeForm.state.loading = true
      this.pickForm.state.loading = true
      console.log(this.$route)
      get({id: this.$route.query.id}).then(res => {
        this.orderForm.state.loading = false
        this.feeForm.state.loading = false
        this.pickForm.state.loading = false
        const data = res.data
        this.data = data
        this.orderForm.form = this.setOrderForm(data)
        this.feeForm.form = this.setFeeForm(data)
        if (data.orderPick) {
          this.pickForm.state.hasForm = true
          this.pickForm.form = this.setPickForm(data)
        }
        if (data.orderTake) {
          this.takeForm.state.hasForm = true
          this.takeForm.form = this.setTakeForm(data)
        }
        this.transportForms = data.transportSimpleList.map(item => {
          return new FormWrapper({
            api: {
              save({form}) {
                return saveTransport(form)
              },
              cancel({id, form}) {
                return get({id})
              }
            },
            form: {
              ...item,
              transportNo: item.transportSimple && item.transportSimple.transportNo,
              cost: isFieldNumber(item.cost) ? item.cost : undefined,
            }
          })
        })
        if (data.extraFeeList && data.extraFeeList.length > 0) {
          this.otherFeeForms = data.extraFeeList.map(item => {
            return new FormWrapper({
              api: {
                save({form}) {
                  return saveOtherFee(form)
                }
              },
              form: {
                ...item,
                fee: isFieldNumber(item.fee) ? item.fee : undefined
              }
            })
          })
        } else {
          this.otherFeeForms.push(new FormWrapper({
            state: {
              mode: 'u'
            },
            api: {
              save({form}) {
                return addOtherFee(form)
              }
            },
            form: {
              orderId: this.$route.query.id
            }
          }))
        }
      })
    },
    setOrderForm(data) {
      return {
        id: this.$route.query.id,
        vin: data.vin
      }
    },
    setFeeForm(data) {
      return {
        id: this.$route.query.id,
        paymentType: data.paymentType,
        transportFee: isFieldNumber(data.transportFee) ? data.transportFee : undefined,
        kickbackFee: isFieldNumber(data.kickbackFee) ? data.kickbackFee : undefined,
        invoiceFee: isFieldNumber(data.invoiceFee) ? data.invoiceFee : undefined,
        insuranceFee: isFieldNumber(data.insuranceFee) ? data.insuranceFee : undefined,
        pickFee: isFieldNumber(data.pickFee) ? data.pickFee : undefined,
        takeFee: isFieldNumber(data.takeFee) ? data.takeFee : undefined,
        spotPayFee: isFieldNumber(data.spotPayFee) ? data.spotPayFee : undefined,
        deliveryPayFee: isFieldNumber(data.deliveryPayFee) ? data.deliveryPayFee : undefined,
        backPayFee: isFieldNumber(data.backPayFee) ? data.backPayFee : undefined,
        slotPayFee: isFieldNumber(data.slotPayFee) ? data.slotPayFee : undefined
      }
    },
    setPickForm(data) {
      return {
        orderId: data.orderPick.orderId,
        type: data.orderPick.type,
        supplierId: data.orderPick.supplierId,
        company: data.orderPick.company,
        settlementType: data.orderPick.settlementType,
        settlementId: data.orderPick.settlementId,
        settlementName: data.orderPick.settlementName,
        settlementPhone: isFieldNumber(data.orderPick.settlementPhone) ? data.orderPick.settlementPhone : undefined,
        driverId: data.orderPick.driverId,
        driverName: data.orderPick.driverName,
        driverPhone: isFieldNumber(data.orderPick.driverPhone) ? data.orderPick.driverPhone : undefined,
        licensePlateNumber: data.orderPick.licensePlateNumber,
        driverCardNumber: data.orderPick.driverCardNumber,
        pickCarFee: isFieldNumber(data.orderPick.pickCarFee) ? data.orderPick.pickCarFee : undefined
      }
    },
    setTakeForm(data) {
      return {
        orderId: data.orderTake.orderId,
        type: data.orderTake.type,
        supplierId: data.orderTake.supplierId,
        company: data.orderTake.company,
        settlementType: data.orderTake.settlementType,
        settlementId: data.orderTake.settlementId,
        settlementName: data.orderTake.settlementName,
        settlementPhone: isFieldNumber(data.orderTake.settlementPhone) ? data.orderTake.settlementPhone : undefined,
        driverId: data.orderTake.driverId,
        driverName: data.orderTake.driverName,
        driverPhone: isFieldNumber(data.orderTake.driverPhone) ? data.orderTake.driverPhone : undefined,
        licensePlateNumber: data.orderTake.licensePlateNumber,
        driverCardNumber: data.orderTake.driverCardNumber,
        takeCarFee: isFieldNumber(data.orderTake.takeCarFee) ? data.orderTake.takeCarFee : undefined
      }
    },
    setTransportForm(data) {
      return {
        transportNo: data.transportSimple && data.transportSimple.transportNo,
        cost: isFieldNumber(data.cost) ? data.cost : undefined,
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.center { width: 1300px; }
::v-deep .car-num .el-input__inner { text-align: center; }
.top-line { position: relative; height: 2px; margin: 0 20px; background-image: linear-gradient(to right, #5EB9FF 25%, #DEDEDE 25%, #DEDEDE 50%, #5694B7 50%, #5694B7 75%, #DEDEDE 25%); background-size: 80px 2px; background-repeat: repeat-x; box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.12); }
.order-summary { padding: 20px 24px 0; }
.order-title { margin-bottom: 18px; font-size: 16px; font-weight: bold;
  span { color: #EC2D0F; }}
.order-content { font-size: 14px;
  .value { font-weight: bold; }}
.el-col { display: flex; }
.el-form .content { border-bottom: 1px solid #dcdcdc; }
.el-form:last-child .content { border-bottom: none; }
.page-form { display: flex; flex: 1; background: #eee; flex-direction: column; align-items: center;
  h1 { margin: 15px 0; text-align: center; font-size: 24px; font-weight: bold; }
  // 背景多图 https://www.cnblogs.com/xiaolantian/p/12629076.html
  .form-wrapper { margin-top: 24px; margin-bottom: 80px; background-color: #fff;
    .form { margin-bottom: 25px; padding: 26px 24px 0;
      .op .el-button { font-weight: normal; }
      .title-bar { display: flex; height: 40px; border-bottom: 1px solid #85AFD6; background: #F3F3F3; align-items: center;
        .title { display: flex; margin: 0 auto 0 24px; align-items: center;
          h2 { font-size: 14px; font-weight: bold; }
          i { font-size: 14px; font-style: inherit;
            .money { color: red; }}}
        .op { margin-right: 24px;
          .item { display: flex; align-items: center;
            .label { font-size: 14px; color: #303030; }}}}
      .total-bar { height: 50px; line-height: 50px; font-size: 14px;
        .label { margin-left: 24px; font-size: 16px; font-weight: bold;
          i { margin-right: 4px; font-style: normal; color: #EC2D0F; }}
        .tip { margin-left: 6px; font-size: 12px; color: #888; }}
      .block { padding-bottom: 10px; border: 1px solid #DCDCDC;
        &+.block { margin-top: 24px; }
        .content { margin: 24px 24px 0;
          .el-form-item { display: flex; }}}}}}
</style>
